const contents = document.querySelectorAll('.content')
const listItems = document.querySelectorAll('nav ul li')

// ✨✨对于 HTML+JS 依旧是采取原始的 "排他思想"
listItems.forEach((item, idx) => {
  item.addEventListener('click', () => {
    // 2.1 点击另一个图标时, 先(排)去除上一个活跃类名:
    hideAllContents()
    hideAllItems()

    // 2.2 再(添加)活跃类名给当前点击到的图标:
    item.classList.add('active')
    contents[idx].classList.add('show')
  })
})

function hideAllContents() {
  contents.forEach(content => content.classList.remove('show'))
}


function hideAllItems() {
  listItems.forEach(item => item.classList.remove('active'))
}